{extend name="./public/base" /}
{block name="title"}个人资料{/block}
{block name="style"}
<style type="text/css">
	.content{
		width: 100%;
		background-color:#fff;
		font-size: 32px;
		color: #6e5858;
	}
	.top{
		width: 100%;
	    background-color: #ffba58;;
	    height: 80px;
	    color: #fff;
	    text-align: center;
	    line-height: 80px;
	    font-size: 32px;
	}
	.back{
		float: left;
	    margin-top: 14px;
	    padding-left: 10px;
	}
	.photo{
		width: 100%;
	   /* height: 29%;*/
	   	height:600px;
	    background-color: #f3f1f114;
	    margin: auto;
	    border-radius: 15px;
	    box-shadow: 0px 5px 2px 2px #f3f1f1f5;
	}
	.tab{
		width: 100%;
		margin: auto;
		height: 60px;
		margin-bottom: 40px;
	}
	
	.tab span{
		display: inline-block;
		text-align: center;
		width: 50%;
		padding-bottom: 20px;
	}

	.list{
		width: 100%;
	    margin: auto;
	  
	}
	.active{
		color:#ff0000a1;
		border-bottom: 2px solid #ff0000a1;
	}
	.item{
		width: 90%;
		height: 400px;
		background-color: #f3f1f114;
	    border-radius: 15px;
	    box-shadow: 0px 5px 2px 2px #f3f1f1f5;
	    margin: auto;
	    margin-bottom: 40px;
	}
	.item .line_one{
		height: 400px;
		width: 100%;
	}

	.item .line_one span{
		display:inline-block;
	}
	.item .line_one .img{
		width: 250px;
		height: 250px;
		padding: 20px;
	}
	.item .line_one .img img{
		width: 100%;
		height: 100%;
	}
	.item .line_one .detail{
		text-align: center;
		height: 70px;
		background-color: #ffba58;
		color: #fff;
		line-height: 70px;
		border-radius: 10px;
		width: 100%;
	}

	.des{
		position: relative;
		top: -70px;
	}
	.des .name{
		padding: 20px;
	}
	.des .des1 span{
		display: inline-block;
		padding: 10px;
		margin-right: 20px;
		border-radius: 10px;
	}
	.des .des1 .age{
		border: 2px solid red;
		color: red;
	}
	.des .des1 .city{
		border: 2px solid blue;
		color: blue;
	}

	
	.rose_mask{
        background-color:gray;
        background: rgba(0, 0, 0, 0.5);
        text-align:center;
        position: fixed; 
        left: 0px; 
        top: 0px; 
        width: 100%; 
        height: 100%; 
        z-index: 20; 
    }
    .rose_mask_content{
        width: 630px;
        height: 580px;
        margin: auto;
        margin-top: 50%;
        background-color: #fdf8f8;
        z-index: 99999;
        border-radius: 20px;
        overflow: hidden;
    }
    .rose_mask_close{
        width: 50px;
        height: 50px;
        background-color: #e1d5d5;
        border-radius: 30px;
        float: right;
        margin: 10px;
        color: #fff;
    }
    .rose_mask_title{
        clear: both;
	    color: black;
	    font-size: 36px;
	    width: 50%;
	    margin: auto;
    }
    .rose_mask_num{
        color: black;
        font-size: 36px;
        margin: 20px;
    }

    .rose_mask_copy{
        font-size: 36px;
        color: #fff;
        background-color: #ffba58;
        border-radius: 20px;
        position: relative;
        width: 80%;
        margin: auto;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .rose_des{
    	color: #8c90a6;
        font-size: 28px;
        margin: 20px;
        width: 80%;
        margin:auto;
    }
    .rose_des span{
		display: inline-block;
		width: 50%;
		text-align: center;
    }
	
	.rose_member{
		background-color: #efe6e6;
        position: relative;
        width: 100%;
        margin: auto;
        line-height: 100px;
        height:100px;
		text-align: center;
        margin-top: 10px;
	}
	.get_rose{
		color:red;

	}
	.open_member{
		color:#ffba58;
		font-size: 36px
	}
	.flower{
		display: inline-block;
	    width: 100px;
	    height: 100px;
	    position: relative;
	    top: 10px;
	}

	.flower_num{
		color:#8c90a6;
	}
	
</style>
{/block}
{block name="main"}
	<div id="app_content" class="content"> 
		<div class="top" >
			<span class="back"><img onclick="javascript:history.back(-1);" src="__STATIC__/images/back5.png" alt=""></span>
			<span>{{text11}}</span>
		</div>
		<div class="tab"><span class="eye active">我看过谁</span><span class="eye ">谁看过我</span></div>
		<div class="list">
			<div class="item">
				<div class="line_one">
					<span class="img"><img src="__STATIC__/images/people1.jpg" alt=""></span>
					<span class="des">
						<div class="name">朱古力</div>
						<div class="des1"><span class="age">26岁</span><span class="city">上海市</span></div>
					</span>
					<div class="detail">
						<span @click="look_info()">查看联系方式</span>
					</div>
				</div>		
			</div>

			<div class="item">
				<div class="line_one">
					<span class="img"><img src="__STATIC__/images/people1.jpg" alt=""></span>
					<span class="des">
						<div class="name">朱古力</div>
						<div class="des1"><span class="age">26岁</span><span class="city">上海市</span></div>
					</span>
					<div class="detail">
						<span>查看联系方式</span>
					</div>
				</div>		
			</div>

			<div class="item">
				<div class="line_one">
					<span class="img"><img src="__STATIC__/images/people1.jpg" alt=""></span>
					<span class="des">
						<div class="name">朱古力</div>
						<div class="des1"><span class="age">26岁</span><span class="city">上海市</span></div>
					</span>
					<div class="detail">
						<span>查看联系方式</span>
					</div>
				</div>		
			</div>
		</div>	


		<div class='rose_mask'>
			<div class='rose_mask_content'>
				<div class='rose_mask_close'>X</div>
				<div class='rose_mask_title'>送TA五朵鲜花即可获取TA的微信号</div>
				<div class='rose_mask_num'><span class="flower"><img src="__STATIC__/images/rose3.png" alt=""></span><span class="flower_num"> X 5<span></div>
				<div class='rose_des'><span class="rose_num">剩余鲜花：9朵</span><a :href="pick_url"><span class="get_rose">免费获取鲜花</span></a></div>
				<div class='rose_mask_copy'>赠送鲜花</div>
				<div class='rose_member'><a :href="open_url"><span class="open_member">开通会员</span></a>   可以直接查看微信号</div>
			</div>
		</div>



	</div>
{/block}
{block name="script"}
<script type="text/javascript" >
    $(document).ready(function(){ 
		var host = "http://"+document.domain+"/api.php/";
		var vm  = new Vue({
			el: '#app_content',
			data: {
			    members: [],
			    text11:'浏览记录',
			    open_url:"http://"+document.domain+"/index.php/index/index/apply",
			    pick_url:"http://"+document.domain+"/index.php/index/index/flower",
			},
		    methods:{
		        // getMemberList:function(){
		        // 	var t = this;
		        // 	$.ajax({
		        // 		url: host+'member/list',
		        // 		type: 'post',
		        // 		dataType: 'json',
		        // 		data: {page: 1},
		        // 		success:function(data){
		        // 			console.log(data.code);
		        // 			if(data.code == 1){
		        // 				t.members = data.data;
		        // 				t.text11 = "tuijian";
		        // 				console.log(123);
		        // 				console.log(t.members);
		        // 				console.log(t.text11);
		        // 			}
		        // 		},
		        // 		error:function(e){
		        // 			console.log('error'+e);
		        // 		}
		        // 	})	
		        // },
		        look_info:function(e){
		        	var id = 1;
		        	$.ajax({
		        		url: host+'member/weixin',
		        		type: 'post',
		        		dataType: 'json',
		        		data: {'id':id},
		        		success:function(data){
		        			console.log(data);
		        			$('.content').append(data.data);
		        		},
		        		error:function(e){
		        			console.log('error'+e);
		        		}
		        	})	
		        }
		    },
		    mounted: function () {
	            console.log("已初始化");
	            //this.getMemberList();
	            //console.log();
	        }

		})
		
		
		
	});
	$(document).on('click', '.mask_close', function(event) {
		console.log(12334);
		$('.mask_close').parent().parent().remove();
	});

	$(document).on('click', '.rose_mask_close', function(event) {
		console.log(12334);
		$('.rose_mask_close').parent().parent().remove();
	});

	//复制
	var clipboard = new ClipboardJS('.mask_copy');
    clipboard.on('success', function(e) {
        $.toast("复制成功","text");
    });
    clipboard.on('error', function(e) {
        $.toast("复制失败","text");
    });
</script>
{/block}